<template>
  <div class="login-container">
    <div class="login-plane">
      <div class="login-plane-container">
        <img class="login-plane-human" src="@/assets/images/login/login_human.png" alt="" />
        <div class="login-plane-title">
          登录系统
          <img class="login-plane-title-line" src="@/assets/images/login/login_horizontal_line.png" alt="" />
        </div>
        <div class="login-plane-form">
          <el-form :model="loginForm" ref="loginFormRef" :rules="loginRules">
            <el-form-item prop="userName">
              <el-input v-model="loginForm.userName" size="large" :prefix-icon="User" placeholder="账号" />
            </el-form-item>
            <el-form-item prop="password" style="margin-top: 20px;">
              <el-input v-model="loginForm.password" size="large" :prefix-icon="Lock" placeholder="密码" type="password"
                show-password />
            </el-form-item>
            <el-form-item style="margin-top: 40px;">
              <el-button @click="submitForm" style="width: 100%" type="primary" size="large">登 录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="login-ground"></div>
    <div class="vue-bits">
      <Galaxy :mouse-interaction="false" :density="0.5" />
    </div>
  </div>
</template>

<script setup>
import {
  User,
  Lock
} from '@element-plus/icons-vue';
import { setToken } from '@/utils/auth';
import Galaxy from "@/components/Galaxy";

const loginForm = reactive({
  userName: 'admin',
  password: '123456'
})
const loginRules = {
  userName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 10, message: '密码长度为3-10', trigger: 'blur' },
  ],
}

const loginFormRef = ref(null)
const submitForm = () => {
  const form = unref(loginFormRef)
  if (!form) return
  form.validate((valid) => {
    if (valid) {
      submitHandle()
    }
  })
}

const router = useRouter()
const route = useRoute()
const redirect = ref(undefined)

watch(route, (newRoute) => {
  redirect.value = newRoute.query && newRoute.query.redirect
}, { immediate: true })
const submitHandle = async () => {
  const params = {
    userName: loginForm.userName,
    password: loginForm.password
  }
  // 提交登陆请求
  console.log(params)
  setToken(loginForm.userName)
  // router.push({ path: '/' })
  const query = route.query
  const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
    if (cur !== "redirect") {
      acc[cur] = query[cur]
    }
    return acc
  }, {})
  router.push({ path: redirect.value || "/", query: otherQueryParams })
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url('@/assets/images/login/sky.png');
  background-repeat: no-repeat;
  background-size: cover;

  .login-plane {
    position: absolute;
    width: 520px;
    height: 390px;
    background-image: url('@/assets/images/login/login_border.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;

    .login-plane-container {
      width: 100%;
      height: 100%;
      border-radius: 18px;
      background-color: #007eff2e;
      position: relative;

      .login-plane-human {
        position: absolute;
        width: 210px;
        right: -120px;
        top: -100px;
        animation: humanMove 6s linear 0s infinite normal;
      }

      .login-plane-title {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        font-size: 30px;
        color: #fff;
        font-weight: 700;
        letter-spacing: 2px;
        // animation: shadow-move 5s infinite;
        background-image: -webkit-linear-gradient(left,
            #4079ff,
            #6f86d6 20%,
            #16d9e3 35%,
            #4079ff 50%,
            #409EFF 70%,
            #6f86d6 85%,
            #4079ff);
        -webkit-text-fill-color: transparent;
        background-clip: text;
        background-size: 200% 100%;
        animation: maskedAnimation 5s infinite linear;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: maskedAnimation 2s infinite linear;

        img {
          width: 50%;
        }

        .login-plane-title-line {
          width: 80%;
          position: absolute;
          bottom: 0;
        }
      }

      .login-plane-form {
        padding: 45px 55px;
        box-sizing: border-box;
      }
    }
  }

  .login-ground {
    position: absolute;
    width: 100%;
    height: 300px;
    background-image: url('@/assets/images/login/ground.png');
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    left: 0;
  }

  .vue-bits {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
}

@keyframes humanMove {
  0% {
    top: -100px;
  }

  25% {
    top: -120px;
  }

  50% {
    top: -100px;
  }

  75% {
    top: -80px;
  }

  100% {
    background: -100px;
  }
}

@keyframes shadow-move {
  0% {
    text-shadow: 0 0 10px #48c6ef;
  }

  50% {
    text-shadow: 0 0 20px #4079ff;
  }

  100% {
    text-shadow: 0 0 10px #6f86d6;
  }
}

@keyframes maskedAnimation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -100% 0;
  }
}

:deep(.el-input) {
  --el-input-border-color: rgba(64, 158, 255, 1);
  --el-input-hover-border-color: rgba(64, 158, 255, 0.8);
}

:deep(.el-input__inner) {
  color: #e9e9eb;
  font-size: 15px;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
}

:deep(.el-input__prefix) {
  color: #e9e9eb;
  font-size: 18px;
}
</style>